import React, { useCallback, useState } from "react";
import A from './components/A'

function App() {
  console.log('App组件渲染了');
  const [count, setCount] = useState(1)

  /**
   * useCallback()  第一个参数是函数，第二个是一个数组，数组中可以放需要依赖的值
   * useCallback()  是一种优化手段当传入子组件的函数和父组件的 值完全没有关系的时候不会触发子组件的更新
   * 需要配合React.memo()使用
   *  */

  const countHandler = useCallback(() => {
    setCount(2)
  }, [count]); // 当这个数组中放入父组件所依赖的项之后也会触发子组件的更新

  return <div>
    <span>App组件</span>&nbsp;&nbsp;&nbsp;
    <button onClick={() => setCount(preState => preState + 1)}>修改count</button>
    {count}
    <A countHandler={countHandler} />
  </div>
}

export default App;
